<!DOCTYPE html>

<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
		<title>安全大屏数据可视化</title>
		<link rel="stylesheet" href="css/app.css" />
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <script type="text/javascript" src="/js/china.js"></script>
    <script type="text/javascript" src="/js/walden.js"></script>   
    <script type="text/javascript"  src="/js/datavIndex.js"></script> 
	</head>
	
	<body>
		<div class="header">
			<h1 class="header-title">安全态势大盘</h1>
		</div>
		<div class="wrapper">
			<div class="content">
				<div class="col col-l">
					<div class="xpanel-wrapper xpanel-wrapper-40">
						<div class="xpanel xpanel-l-t">
							<div class="title">柱状图</div>
							  <div id="TransverseBarLh" style="width:96%; height:90%;"></div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-60">
						<div class="xpanel xpanel-l-b">
							<div class="title">攻击IP Top10</div>
							
							<div class="layui-carousel" style="margin:0 auto;background-color:#0B0F33" id="test2">
								<div align='center' carousel-item="">
									
									<div align='center' style="background-color:#0B0F33">
										
											<!-- <table class="layui-hide"  id="RollPageTableLb" lay-filter="RollPageTableLb"></table> -->
								
									  <table class="layui-table" lay-even="" lay-skin="nob" style="width:100%;height:auto;margin:0 0">
										<colgroup>
										  <col width="80">
										  <col width="120">
										  <col width="70">
										  <col width="130">
										  <col>
										</colgroup>
										<thead>
										  <tr style="background-color:#0B0F33;color:#fff">
											<th>序号</th>
											<th>攻击IP</th>
											<th>次数</th>
											<th>城市</th>
										  </tr> 
										</thead>
										<tbody id="RollPageTableLb">
									  </table>
									</div>
									
									<div align='center' style="background-color:#0B0F33">
										 
											<!-- <table class="layui-hide"  id="RollPageTableLb" lay-filter="RollPageTableLb"></table> -->
										 
										<table class="layui-table" lay-even="" lay-skin="nob" style="width:100%;height:auto;margin:0 0">
										  <colgroup>
										  <col width="80">
										  <col width="120">
										  <col width="70">
										  <col width="130">
											<col>
										  </colgroup>
										  <thead>
											<tr style="background-color:#0B0F33;color:#fff">
											  <th>序号</th>
											  <th>限流IP</th>
											  <th>次数</th>
											  <th>城市</th>
											</tr> 
										  </thead>
										  <tbody id="RollPageTableLb11">
										</table>
									</div>  
									
								</div>
							</div>
							
						</div>
					</div>
				</div>
				<div class="col col-c">
					<div class="xpanel-wrapper xpanel-wrapper-75">
						<div class="xpanel no-bg">
						<div id="chinaMapRegion" style="width:98%;height:96%;"></div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-25">
						<div class="xpanel xpanel-c-b">
							<div class="title title-long">攻击事件走势</div>
							<div id="DatavDynamicLine" style="width:98%; height:90%;"></div>
						</div>
					</div>
				</div>
				<div class="col col-r">
					<div class="xpanel-wrapper xpanel-wrapper-25">
						<div class="xpanel xpanel-r-t">
							<div class="title">攻击与限流曲线</div>
							<div id="AreaLineRh" style="width:96%;height:96%;"></div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-30">
						<div class="xpanel xpanel-r-m">
							<div class="title">一周安全事件</div>
							<div id="VerticalBarRm" style="width:96%; height:90%;"></div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-45">
						<div class="xpanel xpanel-r-b">
							<div class="title">攻击类型</div>
							<div id="HollowPieRb" style="float:left; width:46%; height:95%;"></div>
							<div id="SolidPieRb2" style="float:left; margin-left:10px; width:46%; height:95%;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
  <script type="text/javascript">
    	$(document).ready(function(){
	      dashboard.DynamicLine();
          dashboard.ChinaMapRegion(); 
          dashboard.VerticalBarRm();
          dashboard.HollowPieRb();
          dashboard.SolidPieRb2();
          dashboard.RollPageTableLb();
          dashboard.RollPageTableLb11();          
          dashboard.TransverseBarLh();
          dashboard.AreaLineRh();
    	});		
  </script>  

  <script type="text/javascript">
			//setInterval(function () {		
	      //$("#RollPageTableLb").empty();
      	//$(document).ready(function () {
      		//dashboard.RollPageTableLb();
      	//});
			//},5000); 
layui.use(['carousel', 'form'], function(){
  var carousel = layui.carousel
  ,form = layui.form;
 
  carousel.render({
    elem: '#test2'
    ,width:'90%'
    ,height:'390px'
    ,interval: 5000
    ,anim: 'fade'
    ,arrow: 'none'
    ,indicator: 'none'
  });
  
  $('.demoTest .layui-btn').on('click', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
  
});    
  </script>
</html>